
import './home.scss'
import TopListShow from './TopListShow'
import { useEffect, useState } from 'react'
// import InitEcharts from '../../EchartsCom/InitEcharts'
import BarEcharts from '../../EchartsCom/BarEcharts'
import { getHomeBarEcharts, getHomeList1,getHomeList2 } from '../../https/Api/home'
import LineEcharts from '../../EchartsCom/LineEcharts'
import TableHome from './TableHome'
import Wtable from '../../components/Wtable'
// 发送网络请求  =》获取到  数据
function Home() {

  let [barDatasObj, setBarDatasObj] = useState({})
  let [listOnes, setListOne] = useState([])
  let [listtwos, setlisttwos] = useState([])
  useEffect(() => {
    //获取到echarts 
    getBarData()
    getHomeListData1()
    getList2 ()
  }, [])


  const getBarData = () => {
    getHomeBarEcharts().then((res: any) => {

      //用一个变量存放起来
      if (res.code == 200) {
        setBarDatasObj(res.echarts)
      }
    })
  }


  // 获取到 list1 数据

  const getHomeListData1 = () => {
    getHomeList1().then((res: any) => {
  
      setListOne(res.lists)
    })
  }

  //获取到2 list 数据


  const getList2 = ()=>{
    getHomeList2().then((res:any)=>{
        //  console.log(res,8889 lists
        //   );

          setlisttwos(res.lists)
         
    })
  }
  return (
    <div className="home ">
      <h2>数据总览</h2>
      {/* dataList */}
      <TopListShow></TopListShow>
      <div className='HomeContent'>
        {/* <InitEcharts></InitEcharts> */}
        <div className='glb-flex1'>
          <BarEcharts id="main" width={100} title="近7日挂号预约情况" barDatasObj={barDatasObj}></BarEcharts>
          {/* <BarEcharts id="apps" width={100} title="近7日门诊充值趋势"></BarEcharts>   */}
          <LineEcharts id="line" width={100} title="近7日挂号预约情况" barDatasObj={barDatasObj}></LineEcharts>
        </div>

        <div className='HomeContent-table glb-flex1'>
          {/* 表格组件  =》封装 =》这个页面的 功能组件 */}

          <div className='HomeContent-table-one'>
            <h2>
              实时挂号</h2>
            {/* 后端只会给你 =》 table 是否可以之间渲染，不然能直接渲染 =》添加一个字段changes
            
            
            
            */}
            <Wtable list={listOnes} changes={['img']}></Wtable>
            
          </div>
          <div className='HomeContent-table-two'>
            <h2>
              热门科室</h2>
            {/* 后端只会给你 =》 */}
         
            {/* <TableHome list={listtwos}></TableHome> */}
            <Wtable list={listtwos} changes={['order']}></Wtable>
          </div>
          <div  className='HomeContent-table-three'>
            <h2>

              热门医生</h2>
            {/* 后端只会给你 =》 */}
            <Wtable list={listtwos} changes={['order']}></Wtable>
          </div>
        </div>
      </div>
    </div>
  )
}


export default Home